<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间计算</title>
</head>
<body>
    <ul class="videos">
        <li data-time="5:43">Video 1</li>
        <li data-time="2:13">Video 2</li>
        <li data-time="3:23">Video 3</li>
        <li data-time="4:42">Video 4</li>
        <li data-time="6:56">Video 5</li>
        <li data-time="1:23">Video 6</li>
    </ul>
    <script>
        // 通过自定义属性来获取元素
        const timeNodes = Array.from(document.querySelectorAll('[data-time]'))
        let secodes = timeNodes
            .map(node => node.dataset.time )
            .map(timeString => {
                const [mins, secondes] = timeString.split(':').map(parseFloat);
                return mins*60 + secondes;
            })
            .reduce((total, everySecondes) => total + everySecondes)

            let secondesLeft = secodes
            const hours = Math.floor(secondesLeft / 3600)
            secondesLeft = secondesLeft % 3600

            const mins = Math.floor(secondesLeft / 60);
            secondesLeft = secondesLeft % 60

            console.log(hours, mins, secondesLeft);
    </script>
</body>
</html>